<script>
export default {
  render: function(h) {
    let left = this.$slots.left;
    let right = this.$slots.right;
    return h(
      "div",
      {
        class: "showContent",
        style: {
          width: "100%",
        },
      },
      [h("div", { class: "left" }, left), h("div", { class: "right" }, right)]
    );
  },
};
</script>

<style lang="scss" scoped>
.showContent {
  border: 1px solid red;
  margin: 20px 0;
  padding: 10px;
}
.showContent::after {
  content: "";
  height: 0;
  display: block;
  clear: both;
  overflow: hidden;
}
.left {
  float: left;
  width: 200px;
  background: teal;
}
.right {
  width: calc(100% - 200px);
  float: right;
  background: tomato;
}
</style>
